<!-- eslint-disable vue/valid-v-model -->
<template>
  <el-dialog :title="form.id?'修改员工':'新增员工'" :visible="visible" @close="closeFn">
    <el-form
      class="form"
      :rules="formrules"
      ref="form"
      :model="form"
      width="200px"
    >
      <!--               人员名称               -->
      <el-form-item prop="userName" label="人员名称">
        <el-col :span="19">
          <el-input
            size="medium"
            maxlength="15"
            placeholder="请输入"
            show-word-limit
            v-model="form.userName"
          ></el-input>
        </el-col>
      </el-form-item>
      <!--                                    角色                     -->
      <el-form-item prop="roleId" label="角色">
        <el-select
          size="medium"
          class="a1"
          v-model="form.roleId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in role"
            :key="item.id"
            :label="item.roleName"
            :value="item.roleId"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--               联系电话               -->
      <el-form-item prop="mobile" label="联系电话">
        <el-col :span="19">
          <el-input
            size="medium"
            maxlength="11"
            placeholder="请输入"
            show-word-limit
            v-model.number="form.mobile"
          ></el-input>
        </el-col>
      </el-form-item>
      <!--                                    负责区域                     -->
      <el-form-item prop="ownerName" label="负责区域">
        <el-select
          size="medium"
          class="a1"
          v-model="form.regionId"
          @change="ownerNameId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in area"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--               头像               -->
      <el-form-item prop="image" label="头像">
        <el-col :span="19">
          <el-upload
            class="a66"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-success="handlePictureCardPreview"
            v-model="form.image"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-col>
      </el-form-item>
      <!--               状态               -->
      <el-form-item class="zt" prop="status" label="状态">
        <el-col :span="19">
          <!-- `checked` 为 true 或 false -->
          <el-checkbox v-model="form.status">是否启用</el-checkbox>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="btn" @click="closeFn">取 消</el-button>
      <el-button class="btn" type="primary" @click="newCard">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { peopleType, area, newPeopke, changePeopke } from '@/api/people'
// import { number } from 'echarts'

export default {
  async created () {
    const { data } = await peopleType()
    console.log(data)
    this.role = data
    const {
      data: { currentPageRecords }
    } = await area()
    this.area = currentPageRecords
  },
  watch: {
    // visible () {
    //   if (this.visible === true && this.ListA) {
    //     this.form.regionName = this.ListA.name
    //     // console.log(this.ListA.name)
    //     this.form.remark = this.ListA.remark
    //     this.form.id = this.ListA.id
    //   }
    // }
  },
  methods: {
    ownerNameId (val) {
      console.log(val)
      const a = this.area.find(item => {
        if (item.id === val) {
          return item
        }
        return item
      })
      this.form.regionName = a.name
    },
    handlePictureCardPreview (response, file, fileList) {
      console.log(file.url)
      this.form.image = file.url
    },

    closeFn () {
      this.form = {
        id: '',
        image: '',
        mobile: '',
        regionId: '',
        regionName: '',
        roleId: '',
        status: '',
        userName: ''
      }
      this.$refs.form.resetFields()
      this.$emit('closeFn')
    },
    async newCard () {
      console.log(this.form)
      // await newPeopke(this.form)
      if (!this.form.id) {
        await newPeopke(this.form).then(() => {
          this.$emit('closeFn')
          this.$refs.form.resetFields()
        }).catch((res) => {
          this.$message(res.response.data)
        })
      } else {
        await changePeopke(this.form).then(() => {
          this.$emit('closeFn')
          this.form = {
            id: '',
            image: '',
            mobile: '',
            regionId: '',
            regionName: '',
            roleId: '',
            status: '',
            userName: ''
          }
          this.$refs.form.resetFields()
        }).catch((res) => {
          this.$message(res.response.data)
        })
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    change: {
      type: Number,
      required: true
    },
    ListA: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      area: [],
      role: '',
      formrules: {
        image: [
          { required: true, message: '这玩意儿不能不填呢', trigger: 'blur' }
        ],
        mobile: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        regionId: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        regionName: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        roleId: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        status: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        userName: [{ required: true, message: '这个也得填呢', trigger: 'blur' }]

      },
      form: {
        image: '',
        mobile: '',
        regionId: '',
        regionName: '',
        roleId: '',
        status: '',
        userName: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 87px;
  height: 87px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}
.avatar-uploader .el-upload {
  border: 3px dashed #f46197;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
  // background-color: #409eff;
}
.avatar-uploader-icon {
  border: 3px solid #87a5f9;
  border-radius: 6px;
  font-size: 28px;
  color: #87a5f9;
  width: 84px;
  height: 84px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 84px;
  height: 84px;
  display: block;
}
::v-deep .el-dialog {
  border-radius: 25px;
  width: 40%;
  // height: 530px;
}
::v-deep .el-col {
  height: 38px;
  // padding: 15px;
}
::v-deep .el-dialog__body {
  padding: 30px 60px;
}
::v-deep .el-dialog {
  border-radius: 25px;
  width: 40%;
  // height: 530px;
}
::v-deep .el-col {
  height: 38px;
  // padding: 15px;
}
::v-deep .el-form-item__label {
  width: 100px;
}
::v-deep .el-dialog__body {
  padding: 0px 30px;
}
.a1 {
  width: 79%;
}
::v-deep .el-form-item {
  margin-top: 20px;

  margin-bottom: 10px;
  // margin-left: 10px;
}
.a2 {
  padding-top: 10px;
  padding-left: 100px;
  width: 80%;
}
.zt {
  margin-top: 60px;
}
</style>
